import * as React from "react";
import { Button, Slider, InputNumber, Checkbox, Dropdown, Menu, Icon, Row, Col, Spin } from "antd";

const CheckboxGroup = Checkbox.Group;

// class BonePropertyComponent extends React.Component<any, any>{
//     state = {
//         inputValue: 1,
//     };

//     onChange = (value: any) => {
//         this.setState({
//             inputValue: value,
//         });
//     };

//     render() {
//         return (
//             <div>
//                 <Button type="dashed" icon="search">BoneName</Button>
//                 <Row gutter={4}>
//                     <Col span={6}>
//                         Length:
//                     </Col>
//                     <Col span={6}>
//                         <Slider />
//                     </Col>
//                     <Col span={6}>
//                         <InputNumber min={1} max={20} />
//                     </Col>
//                 </Row>
//                 <Row>
//                     <Col>
//                         Inherit:
//                     </Col>
//                     <Col>
//                         <Checkbox>Rotation</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Scale</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Reflection</Checkbox>
//                     </Col>
//                 </Row>
//                 <Row>
//                     <Col>
//                         Icon:
//                     </Col>
//                     <Col>
//                         <Icon type="link" />
//                     </Col>
//                     <Col>
//                         <Checkbox>Name</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Visible</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Selectable</Checkbox>
//                     </Col>
//                 </Row>
//             </div>
//         );
//     }
// }
// const menu = (
//     <Menu>
//         <Menu.Item key="1">1st menu item</Menu.Item>
//         <Menu.Item key="2">2nd menu item</Menu.Item>
//         <Menu.Item key="3">3d menu item</Menu.Item>
//     </Menu>
// );

// const DropdownButton = Dropdown.Button;

// class SlotPropertyComponent extends React.Component<any, any> {
//     render() {
//         return (
//             <div>
//                 <Button type="dashed" icon="search">SlotName</Button>
//                 <Row>
//                     <Col>
//                         Alpha
//                     </Col>
//                     <Col>
//                         <Slider />
//                     </Col>
//                     <Col>
//                         <InputNumber min={1} max={20} />
//                     </Col>
//                 </Row>
//                 <Row>
//                     <Col>
//                         Inherit:
//                     </Col>
//                     <Col>
//                         Dropdown
//                     </Col>
//                     <Col>
//                         <Checkbox>Scale</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Reflection</Checkbox>
//                     </Col>
//                 </Row>
//                 <Row>
//                     <Col>
//                         Icon:
//                     </Col>
//                     <Col>
//                         <Icon type="link" />
//                     </Col>
//                     <Col>
//                         <Checkbox>Name</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Visible</Checkbox>
//                     </Col>
//                     <Col>
//                         <Checkbox>Selectable</Checkbox>
//                     </Col>
//                 </Row>
//             </div>
//         );
//     }
// }

export default class PropertyComponent extends React.Component<any, any> {
    render() {
        return (
            <div style={{ width: "100%", height: "100%" }}>
                <Spin />
            </div>
        );
    }
}